<template>
  <div class="wrapper">
    <el-card>
      <div class="title">
        <span>
          项目【{{ detail.proName }} - {{ detail.nodeName }}】，
        </span>
        <span>
          总投入人天修改前 ：{{ detail.proPutinOld }}，
        </span>
        <span>
  修改后 ：{{ detail.proPutinNew }}
        </span>

      </div>
      <div class="title">具体变更内容如下</div>
      <div class="title">项目周期变更：</div>
      <div class="changesTime">
        <div class="item">
          <div class="leftLable">
            变更前：{{ detail.oldProStartDate|dateFormat }} ~ {{ detail.oldProEndDate|dateFormat }}
          </div>
          <div class="leftLable">
            变更后：{{ detail.newProStartDate|dateFormat }} ~ {{ detail.newProEndDate|dateFormat }}
          </div>
        </div>
      </div>
      <div class="title">节点周期变更：</div>
      <div class="changesTime">
        <div class="item">
          <div class="leftLable">
            变更前：{{ detail.oldNodeStartDate|dateFormat }} ~ {{ detail.oldNodeEndDate|dateFormat }}
          </div>
          <div class="leftLable">
            变更后：{{ detail.newNodeStartDate|dateFormat }} ~ {{ detail.newNodeEndDate|dateFormat }}
          </div>
        </div>
      </div>
      <div class="title">新增人员：</div>
      <div class="changesTime changesAddUser">
        <el-table
          :data="detail.addUserTOList"
          style="width: 100%"
          border
          :header-cell-style="tableHeaderStyle"
        >
          <el-table-column
            prop="userName"
            label="姓名"
            align="center"
          />
          <el-table-column
            label="投入方式"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                <span>{{ inputTypeEnum[scope.row.inputType] }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="累计投入人天"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                <span>累计投入{{ scope.row.inputDaily }}天</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="投入日期"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <span>
                <span>{{ scope.row.inputStart|dateFormat }} ~ {{ scope.row.inputEnd|dateFormat }}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="title">变更(延迟或缩短)人员：</div>
      <div class="changesTime changesPeople">
        <el-table
          :data="detail.updateUserTOList"
          style="width: 100%"
          border
          :header-cell-style="tableHeaderStyle"
        >
          <el-table-column
            prop="userName"
            label="姓名"
            align="center"
          />
          <el-table-column
            label="投入方式"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                <span v-if="scope.row.inputTypeNameOld">{{ scope.row.inputTypeNameOld }} -></span> <span>{{ scope.row.inputTypeNameNew }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="累计投入人天"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                <span>{{ scope.row.inputDailyOld }}</span> ->
                <span>{{ scope.row.inputDailyNew }}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <div >
          <div class="title">变更概要</div>
          <div class="changesAddUser">

             <el-input
             v-model="detail.changeSummary"
              :disabled="true"
              type="textarea"
              :rows="4"
              placeholder=""
              :maxlength="500"
            >

            </el-input>



          </div>
        </div>


      <el-button class="back" type="primary" @click="back">返回</el-button>
    </el-card>
  </div>
</template>

<script>
import { http_project_changesDetail } from '@/api/projectChanges'
import {tableHeaderStyle} from '@/utils/constant'
import moment from 'moment'

const inputTypeEnum = {
  1: '自定义',
  2: '平均'
}
export default {
  data() {
    return {
      detail: {},
      tableData: [],
      proId: null,
      inputTypeEnum,
      tableHeaderStyle
    }
  },
  filters: {
    inputEndFormat: function(item) {
      return item.newProEndDate && moment(item.newProEndDate).format('YYYY-MM-DD hh:mm:ss')
    },
    dateFormat: function(date) {
      return date && moment(date).format('YYYY-MM-DD')
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.proId = this.$route.query.id
      this.proNodeId = this.$route.query.proNodeId
      this.$nextTick(() => {
        this.getDetail()
      })
    },
    getDetail() {
      const params = {
        proId: this.proId,
        proNodeId: this.proNodeId
      }
      http_project_changesDetail(params).then(res => {
        const { data } = res
        this.detail = data || {}
      })
    },
    back() {
      history.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
$baseWidth: 320px;
@mixin baseStyle {
  width: $baseWidth;
  // text-align: right;
  white-space: nowrap;
}
.wrapper{
  padding: 40px;
  .title{
    @include baseStyle;
    font-weight: bold;
    margin: 10px;
  }
  .changesTime{
    .item{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      font-size: 14px;
      .leftLable{
        font-size: 14px;
        text-align: end;
        @include baseStyle;
      }
    }
    .item_staff{
      padding-left: 60px;
    }
  }
  .changesPeople, .changesAddUser{
    width: 800px;
  }
  .back{
    margin: 40px 20px 10px 360px;
  }
}
</style>
